<template>
  <transition name="slide">
	<div class="newaddr">
      <header-common :title="title"></header-common>
    <section class="address_add_content">
    <form action="addressForm" id="addressForm_id">
        <ul>
            <li>
                <input type="text" placeholder="姓名">
            </li>
            <li>
                <input type="tel" placeholder="手机号">
            </li>
            <li>
                <select name="provinceId_temp" id="provinceId_temp" onchange="changeprovince(this.value)" class="province_select">
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                </select>
                <select name="cityId_temp" id="cityId_temp" onchange="changecity(this.value)">
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                    <option value="1">北京</option>
                </select>            
            </li>
    
            <li>
                <select name="countyid" id="countySel" onchange="changecounty(this.value)">
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                    <option value="1">朝阳区</option>
                </select>
            </li>
            <li>
                <input type="text" name="address" placeholder="请输入具体的街道地址">
            </li>  
            <li>
                <div class="btn">保存地址</div>
            </li>              
        </ul>
    </form>
    </section>      
	</div>
</transition>		
</template>
<script>
import HeaderCommon from 'base/header-common/header-common'

export default{
    data() {
      return {
        title:'新建收货地址'        
      }
    },    
    computed:{
    },
    created(){
    },
    methods:{
     
    },
    components: {HeaderCommon}
  }	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
.newaddr{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}
  .slide-enter-active,.slide-leave-active{
    transition:all 0.3s;
  }
  .slide-enter,.slide-leave-to{
    transform:translate3d(100%,0,0);
  } 

.address_add_content {
    padding: 0 10px;
}
.address_add_content li {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 10px 0;
}
.address_add_content input[type=text], .address_add_content input[type=tel] {
    height: 14px;
    line-height: 14px;
    padding: 9px 0 9px 10px;
    border: 1px solid #e5e5e5;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    border-radius: 0;
}
.address_add_content .province_select {
    margin-right: 30px;
}
.address_add_content select {
    border-radius: 0;
    border: 1px solid #e5e5e5;
    height: 34px;
    line-height: 34px;
    padding: 0 23px 0 10px;
    color: #333;
    background:url(./icon_down.png) no-repeat center right;
    background-size: 23px 7px;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.btn {
    color: #fff;
    text-align: center;
    background-color: $color-sub-theme;
    width: 84%;
    margin: 0 auto;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    letter-spacing:1px;
    margin-top:38px;
}


</style>